<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>消息</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
    <link rel="stylesheet" href="../css/style.css" />
    <style>
      .messages-tab {
        display: flex;
        border-bottom: 1px solid #eee;
        background-color: white;
      }

      .tab-button {
        flex: 1;
        text-align: center;
        padding: 12px 0;
        font-size: 15px;
        font-weight: 500;
        color: #666;
        position: relative;
      }

      .tab-button.active {
        color: #007aff;
      }

      .tab-button.active:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 3px;
        background-color: #007aff;
        border-radius: 3px;
      }

      .message-item {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        border-bottom: 1px solid #f0f0f0;
        background-color: white;
      }

      .message-avatar {
        width: 48px;
        height: 48px;
        border-radius: 24px;
        margin-right: 12px;
        background-color: #f0f0f0;
        overflow: hidden;
      }

      .message-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .message-content {
        flex: 1;
      }

      .message-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 4px;
      }

      .message-name {
        font-weight: 500;
        font-size: 15px;
        color: #333;
      }

      .message-time {
        font-size: 12px;
        color: #999;
      }

      .message-preview {
        font-size: 14px;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .badge {
        background-color: #ff3b30;
        color: white;
        font-size: 12px;
        min-width: 18px;
        height: 18px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
        margin-left: 8px;
      }

      .notification-item {
        display: flex;
        padding: 14px 16px;
        border-bottom: 1px solid #f0f0f0;
        background-color: white;
      }

      .notification-icon {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background-color: #f0f5ff;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #007aff;
        margin-right: 12px;
      }

      .notification-content {
        flex: 1;
      }

      .notification-title {
        font-weight: 500;
        font-size: 15px;
        color: #333;
        margin-bottom: 4px;
      }

      .notification-body {
        font-size: 14px;
        color: #666;
        margin-bottom: 6px;
      }

      .notification-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .notification-time {
        font-size: 12px;
        color: #999;
      }

      .notification-action {
        font-size: 13px;
        color: #007aff;
      }

      .tab-content {
        display: none;
      }

      .tab-content.active {
        display: block;
      }

      .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        color: #999;
      }

      .empty-icon {
        font-size: 48px;
        margin-bottom: 16px;
        color: #ccc;
      }

      .empty-text {
        font-size: 15px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="iphone-container">
      <!-- iOS 状态栏 -->
      <div class="status-bar">
        <div class="status-bar-icons">
          <span class="time">14:30</span>
        </div>
        <div class="status-bar-icons">
          <i class="fas fa-signal"></i>
          <i class="fas fa-wifi ml-2"></i>
          <i class="fas fa-battery-full ml-2"></i>
        </div>
      </div>

      <!-- 顶部导航 -->
      <div
        class="flex justify-between items-center px-4 py-2 bg-white sticky top-0 z-10"
      >
        <div class="text-xl font-semibold">消息</div>
        <a href="#" class="text-blue-500">
          <i class="fas fa-cog"></i>
        </a>
      </div>

      <!-- 消息标签页 -->
      <div class="messages-tab">
        <div class="tab-button active" data-tab="chat">
          <span>聊天</span>
        </div>
        <div class="tab-button" data-tab="notifications">
          <span>通知</span>
        </div>
      </div>

      <!-- 主要内容区域 -->
      <div class="content pb-20">
        <!-- 聊天标签页内容 -->
        <div id="chat-tab" class="tab-content active">
          <!-- 聊天列表 -->
          <div class="message-item">
            <div class="message-avatar">
              <img
                src="../images/avatar1.jpg"
                alt="系统团队"
                onerror="this.src='https://via.placeholder.com/48';this.onerror='';"
              />
            </div>
            <div class="message-content">
              <div class="message-header">
                <div class="message-name">系统团队</div>
                <div class="message-time">09:30</div>
              </div>
              <div class="message-preview">
                欢迎使用应用商城，这里可以找到最新、最热门的应用！
              </div>
            </div>
          </div>

          <div class="message-item">
            <div class="message-avatar">
              <img
                src="../images/avatar2.jpg"
                alt="客服中心"
                onerror="this.src='https://via.placeholder.com/48';this.onerror='';"
              />
            </div>
            <div class="message-content">
              <div class="message-header">
                <div class="message-name">客服中心</div>
                <div class="message-time">昨天</div>
              </div>
              <div class="message-preview">您好，有什么可以帮到您的吗？</div>
            </div>
          </div>

          <div class="message-item">
            <div class="message-avatar">
              <img
                src="../images/avatar3.jpg"
                alt="游戏推荐"
                onerror="this.src='https://via.placeholder.com/48';this.onerror='';"
              />
            </div>
            <div class="message-content">
              <div class="message-header">
                <div class="message-name">游戏推荐</div>
                <div class="message-time">周一</div>
              </div>
              <div class="message-preview">查看本周最热门的游戏排行榜！</div>
            </div>
          </div>

          <div class="message-item">
            <div class="message-avatar">
              <img
                src="../images/avatar4.jpg"
                alt="安全中心"
                onerror="this.src='https://via.placeholder.com/48';this.onerror='';"
              />
            </div>
            <div class="message-content">
              <div class="message-header">
                <div class="message-name">安全中心</div>
                <div class="message-time">上周</div>
              </div>
              <div class="message-preview">
                您的账号已完成安全检测，一切正常！
              </div>
            </div>
          </div>

          <div class="message-item">
            <div class="message-avatar">
              <img
                src="../images/avatar5.jpg"
                alt="应用更新"
                onerror="this.src='https://via.placeholder.com/48';this.onerror='';"
              />
            </div>
            <div class="message-content">
              <div class="message-header">
                <div class="message-name">应用更新</div>
                <div class="message-time">12/10</div>
              </div>
              <div class="message-preview">您有5个应用可以更新到最新版本</div>
            </div>
          </div>
        </div>

        <!-- 通知标签页内容 -->
        <div id="notifications-tab" class="tab-content">
          <!-- 通知列表 -->
          <div class="notification-item">
            <div class="notification-icon">
              <i class="fas fa-bell"></i>
            </div>
            <div class="notification-content">
              <div class="notification-title">系统通知</div>
              <div class="notification-body">
                您的账号安全状态良好，继续保持良好的安全习惯。
              </div>
              <div class="notification-footer">
                <div class="notification-time">今天 10:23</div>
                <div class="notification-action">查看详情</div>
              </div>
            </div>
          </div>

          <div class="notification-item">
            <div class="notification-icon">
              <i class="fas fa-download"></i>
            </div>
            <div class="notification-content">
              <div class="notification-title">下载完成</div>
              <div class="notification-body">
                您下载的应用"王者荣耀"已成功安装。
              </div>
              <div class="notification-footer">
                <div class="notification-time">今天 09:15</div>
                <div class="notification-action">打开</div>
              </div>
            </div>
          </div>

          <div class="notification-item">
            <div class="notification-icon">
              <i class="fas fa-gift"></i>
            </div>
            <div class="notification-content">
              <div class="notification-title">限时优惠</div>
              <div class="notification-body">
                多款热门付费应用限时免费，抓紧时间下载吧！
              </div>
              <div class="notification-footer">
                <div class="notification-time">昨天 14:30</div>
                <div class="notification-action">去看看</div>
              </div>
            </div>
          </div>

          <div class="notification-item">
            <div class="notification-icon">
              <i class="fas fa-star"></i>
            </div>
            <div class="notification-content">
              <div class="notification-title">应用评分</div>
              <div class="notification-body">
                我们注意到您经常使用"抖音"，可以给它评个分吗？
              </div>
              <div class="notification-footer">
                <div class="notification-time">前天 20:45</div>
                <div class="notification-action">评分</div>
              </div>
            </div>
          </div>

          <div class="notification-item">
            <div class="notification-icon">
              <i class="fas fa-sync-alt"></i>
            </div>
            <div class="notification-content">
              <div class="notification-title">自动更新</div>
              <div class="notification-body">
                已为您自动更新3个应用到最新版本。
              </div>
              <div class="notification-footer">
                <div class="notification-time">12/12 08:30</div>
                <div class="notification-action">查看详情</div>
              </div>
            </div>
          </div>

          <div class="notification-item">
            <div class="notification-icon">
              <i class="fas fa-shield-alt"></i>
            </div>
            <div class="notification-content">
              <div class="notification-title">隐私保护</div>
              <div class="notification-body">
                我们更新了隐私政策，请查看并确认。
              </div>
              <div class="notification-footer">
                <div class="notification-time">12/10 16:20</div>
                <div class="notification-action">查看</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部导航栏 -->
      <div class="tab-bar">
        <div class="tab-item">
          <i class="fas fa-home"></i>
          <span>首页</span>
        </div>
        <div class="tab-item">
          <i class="fas fa-compass"></i>
          <span>发现</span>
        </div>
        <div class="tab-item">
          <i class="fas fa-download"></i>
          <span>下载</span>
        </div>
        <div class="tab-item active">
          <i class="fas fa-comment-dots"></i>
          <span>消息</span>
        </div>
        <div class="tab-item">
          <i class="fas fa-user"></i>
          <span>我的</span>
        </div>
      </div>
    </div>

    <!-- 引入JavaScript文件 -->
    <script src="../js/main.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // 标签页切换功能
        const tabButtons = document.querySelectorAll(".tab-button");
        const tabContents = document.querySelectorAll(".tab-content");

        tabButtons.forEach(button => {
          button.addEventListener("click", function () {
            // 移除所有标签页的active类
            tabButtons.forEach(btn => btn.classList.remove("active"));
            tabContents.forEach(content => content.classList.remove("active"));

            // 添加当前标签页的active类
            this.classList.add("active");
            const tabId = this.getAttribute("data-tab");
            document.getElementById(tabId + "-tab").classList.add("active");
          });
        });

        // 消息项点击事件
        const messageItems = document.querySelectorAll(".message-item");
        messageItems.forEach(item => {
          item.addEventListener("click", function () {
            console.log("打开聊天对话");
            // 这里可以添加打开聊天对话的逻辑
          });
        });

        // 通知项点击事件
        const notificationActions = document.querySelectorAll(
          ".notification-action"
        );
        notificationActions.forEach(action => {
          action.addEventListener("click", function (e) {
            e.stopPropagation();
            const actionText = this.textContent;
            console.log("执行操作: " + actionText);
            // 这里可以添加执行相应操作的逻辑
          });
        });

        const notificationItems =
          document.querySelectorAll(".notification-item");
        notificationItems.forEach(item => {
          item.addEventListener("click", function () {
            console.log("查看通知详情");
            // 这里可以添加查看通知详情的逻辑
          });
        });
      });
    </script>
  </body>
</html>
